// src\views\news\News.jsx
// 游客模式 新闻列表
import React, { useEffect, useState } from 'react'
import { Card, Col, Row, List, Descriptions } from 'antd';
import axios from 'axios';
import _ from 'lodash';

export default function News() {
    const [list, setlist] = useState([]);
    useEffect(() => {
        axios.get('http://localhost:8888/news?publishState=2&_expand=category').then(res => {
            // console.log("_.groupBy(res.data)------", _.groupBy(res.data, item => item.category.title));
            // console.log("Object.entries(_.groupBy(res.data,item=>item.category.title))------", Object.entries(_.groupBy(res.data, item => item.category.title)));
            setlist(Object.entries(_.groupBy(res.data, item => item.category.title)));
        })
    }, []);
    return (
        <div style={{
            width: "95%",
            margin: '0 auto'
        }}>
            <div className='site-card-wrapper'>
                <Descriptions title="全球新闻"></Descriptions>
                <Row gutter={[16, 16]}>
                    {
                        list.map(item =>
                            <Col span={8} key={item[0]}>
                                <Card title={item[0]} bordered={true}>
                                    <List
                                        size='small'
                                        dataSource={item[1]}
                                        pagination={{
                                            pageSize: 3
                                        }}
                                        renderItem={data => <List.Item><a href={`#/detail/${data.id}`}>{data.title}</a></List.Item>}
                                    />
                                </Card>
                            </Col>
                        )
                    }
                </Row>


            </div>
        </div>
    )
}
